<template>
      <div>
    <!-- 使用图标 -->
    <el-icon @click="ck">
        <caret-left v-if="store.state.homeview.navBool"/>
        <caret-right v-else/>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
// 引入element文件
import {CaretRight,CaretLeft} from '@element-plus/icons-vue'
// 使用vuex
import {useStore} from 'vuex'
const store=useStore()//获取store对象
// 图标添加点击事件，修改store中的值
let ck=()=>{
    console.log('图标被点击')
    // 触发store的mutation修改
    store.commit('SET_NAVBOOL')
    console.log(store.state.homeview.navBool);
    
}
</script>

<style scoped lang="scss">
.el-header{
    line-height: 70px; 
    /* 设置图标垂直居中 */
    .el-icon{
        font-size:20px;
        /* 设置图标大小 */
    }
}
</style>